<template>
  <transition name="fade">
    <nut-noticebar
      class="notice-box"
      :text="text"
    ></nut-noticebar>
  </transition>
</template>

<script>
export default {
  name: 'Notice',
  data () {
    return {
      text:'',
      textArr: [
          '1 第一条公告',
          '2 第二条公告第二条公告',
          '3 第三条公告第三条公告第三条公告'
      ],
      number: 0
    }
  },
    methods:{
        getData(){
            this.$axios.get(this.$api_url.get_notice).then((res)=>{
                if( res.data ){
                    this.textArr = res.data;
                    if(this.textArr.length>0){
                        this.text = this.textArr[0];
                        this.startMove();
                    } else{
                        this.text = this.$t("Notice.zwgg");
                    }
                }
            })
        },
        startMove () {
            // eslint-disable-next-line
            setInterval(() => {
                if (this.number === this.textArr.length-1) {
                    this.number = 0;
                } else {
                    this.number += 1;
                }
                this.text="";
                this.text = this.textArr[this.number];
            }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
        }
    },
    mounted() {
      setTimeout(()=>{
          this.getData();
      },1000);
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .notice-box{
    z-index: 0;
    transition: all 3s;
  }
</style>
